<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #warp {
            position: relative;
            height: 600px;
            width: 400px;
            margin-left: 50px;
            margin-top: 50px;
        }

        #small {
            height: 400px;
            width: 400px;
            position: absolute;
            cursor: pointer;
        }

        #small img {
            height: 400px;
            width: 400px;
        }

        #small #shadow {
            width: 100px;
            height: 100px;
            background-color: rgba(100, 152, 158, 0.6);
            top: 0;
            position: absolute;
            display: none;
        }

        #warp .nav {
            position: absolute;
            top: 450px;
            height: 50px;
            width: 400px;
            list-style: none;
        }

        #warp .nav li {
            float: left;
            height: 80px;
            width: 80px;
            margin-left: 20px;
        }

        #warp .nav li img {
            height: 80px;
            width: 80px;
        }

        #big {
            position: absolute;
            left: 500px;
            height: 400px;
            width: 400px;
            overflow: hidden;
            display: none;
        }

        #big img {
            height: 1600px;
            width: 1600px;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="warp">
    <div id="small">
        <img id="smallImg" src="img/small1.jpg"/>
        <div id="shadow"></div>
    </div>
    <div id="big">
        <img id="bigImg" src="img/big1.jpg"/>
    </div>
    <ul class="nav">
        <li><img src="img/small1.jpg" data-src="img/big1.jpg"/></li>
        <li><img src="img/small2.jpg" data-src="img/big2.jpg"/></li>
        <li><img src="img/small3.jpg" data-src="img/big3.jpg"/></li>
        <li><img src="img/small4.jpg" data-src="img/big4.jpg"/></li>
    </ul>
</div>
</body>
<script>

    //思考 根据不同的数据 加载不同的dom元素
    var dataSource = [
        {small: "small1.jpg", big: "big1.jpg"},
        {small: "small2.jpg", big: "big2.jpg"},
        {small: "small3.jpg", big: "big3.jpg"},
        {small: "small4.jpg", big: "big4.jpg"}];


    var liList = document.querySelectorAll(".nav li");
    var smallImg = document.querySelector("#smallImg");
    var small = document.querySelector("#small");
    var shadow = document.querySelector("#shadow");
    var bigImg = document.querySelector("#bigImg");
    for (var i = 0; i < liList.length; i++) {
        liList[i].children[0].onmouseover = function () {
            var src = this.getAttribute("src"); //this.src
            smallImg.src = src;
            bigImg.src = this.getAttribute("data-src");
        }
    }
    //选项卡的功能
    var maxLeft = parseInt(getStyleAttr(small, "width")) - parseInt(getStyleAttr(shadow, "width"));
    var maxTop = parseInt(getStyleAttr(small, "height")) - parseInt(getStyleAttr(shadow, "height"));
    //遮罩层的实现
    small.onmousemove = function (e) {
        var evt = window.event || e;
        var x = evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - parseInt(getStyleAttr(small.parentNode, "margin-left")) - parseInt(getStyleAttr(shadow, "width")) / 2;//鼠标距离左边的距离减去大边框距离左边的距离 减去遮罩层宽度的一半
        var y = evt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - parseInt(getStyleAttr(small.parentNode, "margin-top")) - parseInt(getStyleAttr(shadow, "height")) / 2;
        //限制四个方位
        if (x < 0) {//左边的处理
            x = 0;
        }
        if (y < 0) { //上方的处理
            y = 0;
        }
        if (x >= maxLeft) {
            x = maxLeft;
        }
        if (y >= maxTop) {
            y = maxTop;
        }
        var bigX = -x * parseInt(getStyleAttr(bigImg, "width")) / parseInt(getStyleAttr(small, "width"));
        var bigY = -y * parseInt(getStyleAttr(bigImg, "height")) / parseInt(getStyleAttr(small, "height"));
        shadow.style.display = "block";
        bigImg.parentNode.style.display = "block";
        shadow.style.left = x + "px";
        shadow.style.top = y + "px";
        bigImg.style.left = bigX + "px";
        bigImg.style.top = bigY + "px";
    }

    small.onmouseout = function () {
        shadow.style.display = "none";
        bigImg.parentNode.style.display = "none";
    }

    function getStyleAttr(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return window.getComputedStyle(obj)[attr];
        }
    }

</script>
</html>